<template>
  <view class="tui-coupon-item tui-top20">
    <image :src="'https://www.thorui.cn/wx/static/images/mall/coupon/bg_coupon_3x.png'" class="tui-coupon-bg" mode="widthFix"></image>
    <image :src="getSignUrl(2)" v-if="expired" class="tui-coupon-sign"></image>
    <view class="tui-coupon-item-left">
      <!--class="tui-color-grey"-->
      <view class="tui-coupon-price-box" :class="{'tui-color-grey': expired || !isAvaliabel}">
        <view class="tui-coupon-price-sign" v-if="coupon.discountMode === 1">￥</view>
        <!--tui-price-small 面值>4位数的时候为true -->
        <view class="tui-coupon-price" :class="{'tui-price-small': coupon.discountMoney.toString().length > 4}">{{discountMoney || '0'}}</view>
        <view class="tui-coupon-price-sign" v-if="coupon.discountMode === 2">折</view>
      </view>
      <view class="tui-coupon-intro" v-if="coupon.discountCategory === 1">
        满{{coupon.fullMoney}}元可用
      </view>
    </view>
    <view class="tui-coupon-item-right">
      <view class="tui-coupon-content">
        <view class="tui-coupon-title-box">
          <view class="tui-coupon-btn" :class="{'tui-bg-grey': expired || !isAvaliabel}">{{couponType}}</view>
          <view class="tui-coupon-title">{{coupon.couponName}}</view>
        </view>
        <view class="tui-coupon-rule">
          <view class="tui-rule-box tui-padding-btm">
            <view class="tui-coupon-circle"></view>
            <view class="tui-coupon-text">{{coupon.supportCategoryDesc}}</view>
          </view>
          <view class="tui-rule-box" v-if="validDate">
            <view class="tui-coupon-circle"></view>
            <view class="tui-coupon-text">{{validDate}}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="tui-btn-box" :class="{'tui-bg-grey': !isAvaliabel || isUsed}" v-if="!expired">
      <tui-button :type="(isAvaliabel && !isUsed) ? 'danger' : 'text'" width="152rpx" height="52rpx" :size="24" shape="circle" open-type="getUserInfo" @getuserinfo="receive" :plain="!coupon.isGet">
        {{btnTxt}}
      </tui-button>
    </view>
  </view>
</template>

<script>
export default {
  name: "tCouponItem",
  props: {
    coupon: {
      type: Object,
      default: () => ({}),
    },
    picker: {
      type: Boolean,
      default: false,
    },
    valid: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      // webURL: "https://www.thorui.cn/wx"
    };
  },
  mounted() {
    // console.log(this.coupon, 'coupon item')
  },
  computed: {
    /**
     * 券的类型
     */
    couponType() {
      return {
        1: "满减券",
        2: "立减券",
        3: "折扣券",
      }[this.coupon?.discountCategory + ""];
    },
    /**
     * 券有效期
     */
    validDate() {
      const {
        // 1:固定时段  2:固定天数
        validateRule,
        // 有效期天数  validateRule为2时
        validDays = 0,
        // 有效期结束
        validEnd = "",
        // 有效期开始
        validStart = "",
      } = this.coupon || {};

      let ret = "";

      if (validateRule === 2) {
        ret = `自领取之日起${validDays}天有效`;
      } else {
        if (validStart && validEnd) {
          ret = `${validStart.split("T")[0]}至${validEnd.split("T")[0]}`;
        } else {
          ret = this.valid ? "未知的有效期" : "";
        }
      }
      return ret;
    },

    btnTxt() {
      let txt = "";
      let coupon = this.coupon;
      if (this.isAvaliabel) {
        if ("couponStatus" in coupon) {
          if (coupon.couponStatus == 0) {
            txt = coupon.isGet ? "立即使用" : "立即领取";
          } else if (coupon.couponStatus == 1) {
            txt = "已使用";
          }
        } else {
          txt = coupon.isGet ? "立即使用" : "立即领取";
        }
      } else {
        txt = "不可用";
      }
      return txt;
    },
    /**
     * 是否已经过期
     */
    expired() {
      // const expired = this.$util.expired(this.coupon.validStart, this.coupon.validEnd)
      // // let unAvaliable = 'isAvaliable' in this.coupon && !this.coupon.isAvaliable
      // return this.valid ? expired : false
      return Number(this.coupon.couponStatus) === 2;
    },
    isAvaliabel() {
      return this.valid
        ? "isAvaliable" in this.coupon && this.coupon.isAvaliable
        : true;
    },
    isUsed() {
      return "couponStatus" in this.coupon
        ? Number(this.coupon.couponStatus) === 1
        : false;
    },
    /**
     * 减免金额
     */
    discountMoney() {
      const { discountMode, discountMoney = 0 } = this.coupon;
      return discountMode === 2 ? discountMoney * 10 : discountMoney;
    },
  },
  mounted() {
    console.log(this.isUsed);
  },
  methods: {
    getSignUrl: function (index) {
      let url = "";
      if (index == 1) {
        url =
          "https://www.thorui.cn/wx/static/images/mall/coupon/img_coupon_beused_3x.png";
      } else if (index == 2) {
        url =
          "https://www.thorui.cn/wx/static/images/mall/coupon/img_coupon_failure_3x.png";
      }
      return url;
    },
    receive() {
      if (!this.isAvaliabel || this.isUsed) return;
      /**
       * 动作: 领取(receive) | 去使用(use)
       */
      this.$store.dispatch("USER_LOGIN", {
        callBack: () => {
          this.$emit(
            "select",
            this.coupon,
            this.picker ? "picked" : this.coupon.isGet ? "use" : "receive"
          );
        },
      });
    },
  },
};
</script>

<style lang="scss">
.tui-coupon-item {
  width: 100%;
  height: 210rpx;
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 30rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.tui-coupon-bg {
  width: 100%;
  height: 210rpx;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}

.tui-coupon-sign {
  height: 110rpx;
  width: 110rpx;
  position: absolute;
  z-index: 9;
  top: -30rpx;
  right: 40rpx;
}

.tui-coupon-item-left {
  width: 218rpx;
  height: 210rpx;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  flex-shrink: 0;
}

.tui-coupon-price-box {
  display: flex;
  color: #e41f19;
  align-items: flex-end;
}

.tui-coupon-price-sign {
  font-size: 30rpx;
}

.tui-coupon-price {
  font-size: 70rpx;
  line-height: 68rpx;
  font-weight: bold;
}

.tui-price-small {
  font-size: 58rpx !important;
  line-height: 56rpx !important;
}

.tui-coupon-intro {
  background: #f7f7f7;
  padding: 8rpx 10rpx;
  font-size: 26rpx;
  line-height: 26rpx;
  font-weight: 400;
  color: #666;
  margin-top: 18rpx;
}

.tui-coupon-item-right {
  flex: 1;
  height: 210rpx;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 24rpx;
  box-sizing: border-box;
  overflow: hidden;
}

.tui-coupon-content {
  width: 82%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.tui-coupon-title-box {
  display: flex;
  align-items: center;
}

.tui-coupon-btn {
  padding: 6rpx;
  background: #ffebeb;
  color: #e41f19;
  font-size: 25rpx;
  line-height: 25rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.9);
  transform-origin: 0 center;
  border-radius: 4rpx;
  flex-shrink: 0;
}

.tui-color-grey {
  color: #888 !important;
}

.tui-bg-grey {
  background: #f0f0f0 !important;
  color: #888 !important;
}

.tui-coupon-title {
  width: 100%;
  font-size: 26rpx;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tui-coupon-rule {
  padding-top: 52rpx;
}

.tui-rule-box {
  display: flex;
  align-items: center;
  transform: scale(0.8);
  transform-origin: 0 100%;
}

.tui-padding-btm {
  padding-bottom: 6rpx;
}

.tui-coupon-circle {
  width: 8rpx;
  height: 8rpx;
  background: rgb(160, 160, 160);
  border-radius: 50%;
}

.tui-coupon-text {
  font-size: 28rpx;
  line-height: 28rpx;
  font-weight: 400;
  color: #666;
  padding-left: 8rpx;
  white-space: nowrap;
}

.tui-top20 {
  margin-top: 20rpx;
}

.tui-coupon-title {
  font-size: 28rpx;
  line-height: 28rpx;
}

.tui-btn-box {
  position: absolute;
  width: 146rpx;
  height: 52rpx;
  right: 20rpx;
  bottom: 40rpx;
  z-index: 10;
}
.geted {
  color: #eee;
}
</style>
